<script setup>
import { toRefs,reactive,markRaw,onBeforeMount } from 'vue';
import Exec from './action/Exec.vue';
import GRPC from './action/GRPC.vue';
import HttpGet from './action/HttpGet.vue';
import TcpSocket from './action/TcpSocket.vue';

const props = defineProps({
    probeType: {
        type: String,
        default: 'startupProbe'
    },
    title: {
        type: String,
        default: "启动探针(StartupProbe)"
    },
    probe: {
        type: Object
    },
    containerIndex: {
        type: Number,
    },
    containerType: {
        type: String
    },
    lifeCycle: {
        type: Boolean,
        default: false
    }
})
let probeBasicConfig =  {
    initialDelaySeconds: 30,
    timeoutSeconds: 2,
    periodSeconds: 30,
    successThreshold: 1,
    failureThreshold: 2,
    // exec grpc
}
const data = reactive({
    options: {
        probeHandler: "close",
        probeHandlers: [
            {
                label: "关闭",
                value: "close"
            },
            {
                label: "执行命令",
                value: "exec"
            },
            {
                label: "调用接口",
                value: "httpGet"
            },
            {
                label: "探测端口",
                value: "tcpSocket"
            },
            
        ],
        probeConfig: {
            exec: {
                command: []
            },
            httpGet: {
                path: "/",
                port: 8080,
                host: '',
                scheme: 'HTTP',
                httpHeaders: []
            },
            tcpSocket: {
                // 支持int或者string
                port: 8080,
                host: ''
            },
            grpc: {
                port: 8080,
                service: ''
            }
        },
        probeActionComp: {
            'exec': markRaw(Exec),
            'httpGet': markRaw(HttpGet),
            'tcpSocket': markRaw(TcpSocket),
            'grpc': markRaw(GRPC),
        }
    }
})
const emits = defineEmits(['probeChangedRollback'])
const probeChanged = ()=> {
    console.log("当前检查方式:", data.options.probeHandler)
    // 删除之前的配置
    Reflect.deleteProperty(probeBasicConfig, 'exec')
    Reflect.deleteProperty(probeBasicConfig, 'httpGet')
    Reflect.deleteProperty(probeBasicConfig, 'tcpSocket')
    Reflect.deleteProperty(probeBasicConfig, 'grpc')
    // 根据不同的选择，赋值不同的配置
    // props.probe = data.options.probeConfig[data.options.probeHandler]
    if (data.options.probeHandler == 'close') {
        // props.probe = {}
        emits('probeChangedRollback', {})
    } else {
        // exec --> httpGet
        probeBasicConfig[data.options.probeHandler] = data.options.probeConfig[data.options.probeHandler]
        // props.probe = probeBasicConfig
        emits('probeChangedRollback', probeBasicConfig)
    }
}
// 处理当probe不为空的情况
onBeforeMount(()=>{
    // 处理生命周期
    if (props.lifeCycle){
        probeBasicConfig = {}
    } else {
        data.options.probeHandlers.push({
            label: "GRPC",
            value: "grpc"
        })
    }
    if (props.probe != null && props.probe != undefined ) {
        // 说明存在probe的配置
        // 判断到底是哪种类型的检查方式
        probeBasicConfig = props.probe 
        // object.keys() exec tcpSocket httpGet grpc
        // 
        if (props.probe.hasOwnProperty('exec')) {
            // 说明是exec类型的检查方式
            data.options.probeHandler = 'exec'
        } else if (props.probe.hasOwnProperty('tcpSocket')) {
            data.options.probeHandler = 'tcpSocket'
        } else if (props.probe.hasOwnProperty('httpGet')) {
            data.options.probeHandler = 'httpGet'
        } else if (props.probe.hasOwnProperty('grpc')) {
            data.options.probeHandler = 'grpc'
        }
    }
})
const {options} = toRefs(data)
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="auto-space-between">
        <span>{{ props.title }}</span>
        <el-select v-model="options.probeHandler" @change="probeChanged()">
            <el-option
            v-for="probe in options.probeHandlers"
            :key="probe.value"
            :label="probe.label"
            :value="probe.value"
            >
            </el-option>
        </el-select>
      </div>
    </template>
    <!-- 健康检查配置 -->
    <div v-if="options.probeHandler!='close'">
        <!-- 通用配置 -->
        <div v-if="!props.lifeCycle">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item  label="延迟检查">
                        <el-input-number v-model.trim="probeBasicConfig.initialDelaySeconds" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item  label="检查间隔" >
                        <el-input-number v-model.trim="probeBasicConfig.periodSeconds" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item  label="超时时间">
                        <el-input-number v-model.trim="probeBasicConfig.timeoutSeconds" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item  label="失败次数" >
                        <el-input-number v-model.trim="probeBasicConfig.failureThreshold" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item  label="成功次数">
                        <el-input-number v-model.trim="probeBasicConfig.successThreshold" />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <!-- 检查方式配置 -->
        <div v-if="options.probeHandler != 'close'" >
            <component
            :container-type="props.containerType"
            :container-index="props.containerIndex"
            :probe-type="props.probeType"
            :probe-config="probeBasicConfig"
            :is="options.probeActionComp[options.probeHandler]"></component>
        </div>
    </div>

  </el-card>
</template>

<style scoped>

</style>
